// 带详情跳转的表格组件
import React, { useEffect } from 'react'
import PropType from 'prop-types'
import { Table } from 'antd'
import style from '@/assets/style.less';
const DynamicTable:React.FC = (props) =>{
  const { columns, tableData = {}, rowKey, changeRoute, turnPage, rowClassName, loading, hasPadding, paginationOption, scroll } = props
  return (
    <div  style={hasPadding ? { padding: '0 32px 32px' } : { padding: '' }}>
      <Table
        columns={columns}
        loading={loading}
        dataSource={tableData && tableData.data && tableData.data.length ? tableData.data : []}
        scroll={scroll}
        rowKey={rowKey + Date.now()}
        // rowClassName={rowClassName ? `${style.tableRowClick}` : ''}
        pagination={tableData && tableData.page ? {
          hideOnSinglePage: true,
          pageSize: tableData.pageSize ,
          total: tableData.total,
          onChange: turnPage,
          current: tableData.page,
          showSizeChanger: true,
          showQuickJumper: true,
          
          showTotal: () => `总共${tableData.total ? tableData.total : 0}条`,
            ...paginationOption
        } : false}
        onRow={record => {
          return {
            onClick: changeRoute.bind(this, record)
          }
        }}
      />
    </div>
  )
}
 
DynamicTable.propTypes = {
  columns: PropType.array,
  tableData: PropType.object,
  rowKey: PropType.string,
  changeRoute: PropType.func,
  turnPage: PropType.func,
  rowClassName: PropType.bool,
  scroll: PropType.bool,
  loading: PropType.bool,
  hasPadding: PropType.bool,
  paginationOption: PropType.object,
}
 
DynamicTable.defaultProps = {
  columns: [],
  tableData: {
    data: [],
    page: {}
  },
  loading: false,
  rowKey: 'id',
  changeRoute: () => { },
  turnPage: () => { },
  rowClassName: false,
  paginationOption: {
    locale:{ // 这里是本地化配置
      items_per_page: '/ 页',
      jump_to: '跳转至',
      page: '页',
      prev_page: '上一页',
      next_page: '下一页',
      prev_5: '向前 5 页',
      next_5: '向后 5 页',
      goto: '前往',
      select_prompt: '请选择',
    },
  },
  scroll: {},
  hasPadding: true
}
 
export default DynamicTable